<template>
	<div class="my-recom">
		<div class="my-recom-container">
			<div class="my-recom-items" :style=" 'width:' + '220' * recommend.length + 'px;'">
				<div class="my-recom-item" v-for="(item, index) in recommend" :key="index">
					<img :src="item" alt="img">
				</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name: "MyRecomSlider",
	components:{},
	methods:{
		getRecommend: function () {
			this.$axios.get('http://localhost:8081/api/recommend').then(res => {
				this.recommend = res.data
			}).catch(err => {
				console.log(err)
			})
		},
	},
	created(){
		this.getRecommend()
	},
	data(){
		return{
			recommend: [],
		}
	}
}
</script>

<style scoped>
	.my-recom-item img {
		width: 100%;
		height: 100%;
	}
	.my-recom-container {
		overflow-x: auto;
		overflow-y: hidden;
	}
	.my-recom-item {
		display: inline-block;
		width: 200px;
		margin: 10px;
		height: 70px;
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 0 1px 3px #AFAFAF;
	}
	.my-recom-items {
		width: 180px;
		height: 180px;
		margin: 10px;
	}
	.my-recom-item {
		margin: 10px;
		height: 100%;
	}

</style>